<template>
    <div class="box">
    <div class="topNav"> 
        <div class="top">
        <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-liebiao"></use>
     </svg>
    </div>
    <div class="topContent">
     <span @click="$router.push('/personal')">我的</span>
     <span  class="active">发现</span>
     <span>云村</span>
     <span>视频</span>
    </div>
    <div class="topright" style="margin-right:10px">
     <svg class="icon" aria-hidden="true" @click="$router.push('/search')">
    <use xlink:href="#icon-sousuo"></use>
     </svg>
    </div>
    </div>
    <SwpierVue></SwpierVue>
    <IconListVue></IconListVue>
    <MusicListVue></MusicListVue>
    </div>
</template>
<script>
import SwpierVue from './Swpier.vue';
import IconListVue from './IconList.vue';
import MusicListVue from './MusicList.vue';
export default {
    components:{
        SwpierVue,
        IconListVue ,
        MusicListVue
    },
    // created(){
    //     this.$store.commit('settronls',0)
    // }
}
</script>
<style lang="less" scoped>
.topNav{
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .topContent{
        width: 65%;
        display: flex;
        justify-content: space-around;
        align-items: center;
       font-size: .36rem;
       .active{
        font-weight: 900;
       }
    }
}
.box{
    width: 100%;

}
</style>
